import React, { Component } from 'react'
import { Tooltip, Button, message } from 'antd'
import getData from '@/Utils/fecth'
import { address } from '@/Utils/apiConfig'
import './commoncard.less'

const { getItemServiceDetail } = address.applicationService

// 超出最大字符省略号表示
const showMaxLength = (str, maxLength) => {
  if (str && str.length) {
    const length = str.length
    let resStr = str
    if (length > maxLength) {
      resStr = str.substring(0, maxLength) + '...'
    }
    return resStr
  }
}

// 解析desc字段
const parseDesc = (str) => {
  if (typeof str === 'string') {
    try {
      let obj = JSON.parse(str)
      if (typeof obj === 'object' && obj) {
        return obj
      } else {
        return obj
      }
    } catch (e) {
      return str
    }
  }
}

// 回调函数-前往服务中心
const goToServiceCenter = (prosFun) => {
  prosFun()
}

// 回调函数-服务详情
const goToServiceDetails = (porpsFun, buyContractIds, item, type) => {
  let id = '', itemData = {}
  if (type === 'my-service') {
    id = item.source_id
  } else if (type === 'service-center') {
    id = item.id
  }
  getData().get(getItemServiceDetail.format({ contractId: id })).then(res => {
    if (res && res.status === 200) {
      itemData = res.data.data

      // item.desc: ""
      // item.desc {string} - 有合约

      // item.desc: { "desc": "xxxx", "scenario": "yyyyy", "cc": false }
      // item.desc {object} - cc: false 无合约， true：有合约

      // buy: true 已购买，且已购买都是有合约的
      const parseDescs = (str) => {
        if (typeof str === 'string') {
          try {
            let obj = JSON.parse(str)
            if (typeof obj === 'object' && obj) {
              return obj
            } else {
              return obj
            }
          } catch (e) {
            return str
          }
        }
      }

      const buy = buyContractIds.includes(itemData.id)
      let scene = true, parseDesc = parseDescs(itemData.desc), desc = '', scenario = ''
      if (typeof parseDesc === 'object') {
        if (!parseDesc.cc) {
          scene = false
        }
        desc = parseDesc.desc
        scenario = parseDesc.scenario
      } else if (typeof parseDesc === 'string') {
        desc = parseDesc
        scenario = parseDesc
      }
      const curItem = {
        ...itemData,
        desc,
        scenario,
        buy,
        scene,
      }
      porpsFun(curItem)
    } else {
      message.error('获取详情失败！')
    }
  }).catch(e => {
    message.error(e)
  })
}

// 回调函数-显示咨询服务modal
const showModal = (e, propsFun) => {
  if (e.stopPropagation) {
    e.stopPropagation()
  } else {
    window.event.cancelBubble = true
  }
  propsFun(true)
}

// 没有服务数据显示
const NoServiceData = (props) => (
  <div className="no-service-data">
    <img className="no_data_img" src={require('../../../../../images/applicationService/no_data.svg')} alt=""/>
    <div className="text">您当前没有服务，请前往服务中心选购</div>
    <div className="no_data_btn com-btn-primary com-normal-btn" onClick={() => goToServiceCenter(props.fun)}>前往服务中心</div>
  </div>
)

const CommonCard = (props) => (

  <div className="service-com-wrap common">
    {
      props.data && props.data.length
        ? props.data.map(item => {
          return (
            <div className={`item-card-wrap ${props.type}`} key={item.id} onClick={() => goToServiceDetails(props.goToServiceDetails, props.buyContractIds, item, props.type)}>
              <div className="header">
                <span className="tooltip-wrap">
                  <Tooltip
                    placement="top"
                    title={item.name}
                    getPopupContainer={node => {
                      if (node) {
                        return node.parentNode
                      }
                      return document.body
                    }}
                  >
                    <span>{showMaxLength(item.name, 10)}</span>
                  </Tooltip>
                </span>

                <span className="edition">{item.version}</span>
              </div>
              <div className="symbol-flag">
                <span className="symbol">#{item.view_type}</span>
              </div>
              <div className="desc">{typeof parseDesc(item.desc) === 'string' ? item.desc : parseDesc(item.desc).desc}</div>
              {
                props.type === 'service-center'
                  ? <Button
                    className="com-btn-primary com-normal-btn btn"
                    onClick={(e) => showModal(e, props.handleModalVisible)}
                    disabled={!!props.buyContractIds.includes(item.id)}
                  >
                    {props.buyContractIds.includes(item.id) ? '已购买' : '咨询服务' }
                  </Button> : null
              }

            </div>
          )
        })
        : <NoServiceData fun={props.goToServiceCenter}/>
    }
  </div>
)

export default CommonCard
